<template>
  <div class="common-layout">
    <el-container>
      <!-- mv视频播放 -->
      <el-aside width="1000px">
        <video controls :src="videoSrc"></video>
      </el-aside>
      <!-- mv排行榜 -->
      <el-main>
        <ul class="mvrank">
          <li class="TOP">MV排行榜TOP10</li>
          <li v-for="rank in ranks" :key="rank.id" @click="goDetails(rank.id)">
            <el-image :src="rank.cover" lazy></el-image>
            <div>{{ rank.name }}-----{{ rank.artistName }}</div>
          </li>
        </ul>
      </el-main>
    </el-container>
  </div>

  <el-button type="primary">
    ❤点赞
  </el-button>
  <el-button type="primary">
    ❤收藏
  </el-button>
  <el-button type="primary">
    ❤转发
  </el-button>

  <div class="common-layout">
    <el-container>
      <!-- 用户头像名称评论时间地址 -->
      <el-aside width="1000px">
        <el-table :data="tableData" style="width: 1000px">
          <!-- 用户头像 -->
          <el-table-column prop="name" label="" width="50">
            <template #default="{ row }">
              <el-image :src="row.user.avatarUrl"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="用户" width="200">
            <template #default="{ row }">
              <p>{{ row.user.nickname }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="评论" width="500">
            <template #default="{ row }">
              <p>{{ row.content }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="时间" width="150">
            <template #default="{ row }">
              <p>{{ row.timeStr }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="地址" width="100">
            <template #default="{ row }">
              <p>{{ row.ipLocation.location }}</p>
            </template>
          </el-table-column>
        </el-table>
      </el-aside>
      <!-- 获取用户评论列表 -->
      <el-main>
        <div class="recommend">
          <el-input class="comment-textarea" v-model="userComment" type="textarea" rows="10" />
          <el-button type="success" @click="getUserComment">评论</el-button>
        </div>

      </el-main>
    </el-container>
  </div>
</template>



<script>
import { Star } from '@element-plus/icons-vue'
import { setCommentInterface } from '@/api/comment'
import { getMvCommentsInterface, getMvRankInterface, getMvRedioInterface } from '../../api/user'
import { mapMutations, mapState } from 'vuex'
export default {
  created() {
    //每条mv评论
    this.getMvCommends({ id: this.mvid })
    // console.log('mvid',this.mvid);
    //mv排行
    this.getMvRank()
  },
  data() {
    return {
      tableData: [],
      ranks: [],
      userComment: '',
    }
  },
  computed: {
    ...mapState("playMVModule", ['mvid', 'videoSrc'])
  },
  methods: {
    ...mapMutations("playMVModule", ['updateMvid', 'getmvsrc']),
    //获取mv的评论
    getMvCommends(params) {
      getMvCommentsInterface(params).then(res => {
        this.tableData = res.comments
        console.log('获取评论列表', res);
      })
    },
    //获取mv排行榜
    getMvRank() {
      getMvRankInterface().then(res => {
        console.log('ranks-----', res)
        this.ranks = res.data
        // console.log(this.ranks );
      })
    },
    //用户发送评论
    getUserComment() {
      setCommentInterface({
        t: 1,
        type: 1,
        id: this.mvid,
        content: this.userComment
      }).then(res => {
        // console.log("发送了评论", res);
        // 触发回调获取评论
        this.getMvCommends({ id: this.mvid })
        res.code === 200 && ElMessage.success('评论成功!')
      })
    },
    //获取点击图片的信息
    getMv() {
      updateMvInterface().then(res => {
        this.mvs = res.data
      })
    },
    //获取mv的id
    getmvid() {
      this.mvid = this.mvs.forEach(element => {
        return element.id
      });
    },
    // 跳转mv详情
    goDetails(mvid) {
      getMvRedioInterface({ id: mvid }).then(res => {
        this.updateMvid(mvid)
        this.getmvsrc(res.data.url)
      })

    },
  },
  components() {
    Star
  },
}
</script>

<style lang="scss" scoped>
.recommend {
  display: flex;
  width: 400px;
  height: 250px;
  // background-color: red;
  justify-content: center;
  flex-direction: row;
}

video {
  width: 1000px;
  height: 600px;
  float: left;
  align-items: center;

}

.mvrank {
  // background-color:red; 
  width: 300px;
  height: 600px;
  // align-items:;
  // float: right;
  margin-left: 20px;
  list-style: none;

}

.TOP {
  font-size: 25px;
  text-align: center;
  color: rgb(236, 65, 65);
}
</style>
